<!doctype html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>注册新用户</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script src="./js/base.js"></script>
    <script src="./js/e.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            background: url(./images/bg.jpg) center center / cover no-repeat !important;
            background-size: 100% 100% !important;
        }

        .layui-form-radio {
            margin: 0 !important;
            padding: 0 !important;
            color: #3DB6FE !important;
        }

        .layui-form-checked[lay-skin=primary] i {
            background: #3DB6FE !important;
        }

        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #3DB6FE !important;
        }
    </style>
</head>

<body class="login-bg">

    <div class="login layui-anim layui-anim-up">
        <div class="message">用户注册</div>
        <div id="darkbannerwrap"></div>

        <form method="post" class="layui-form">
            <div style="position: relative;">
                <input name="name" id="name"
                    style="background: url(images/xiehui.png) no-repeat left;background-size: 7% 53%;background-position: 3% 56%;width: 100%;text-indent:24px"
                    lay-verify="required" placeholder="请输入协会名称" autocomplete="off" type="text" class="layui-input">
            </div>
            <hr class="hr15">
            <div style="position: relative;">
                <input name="tel" id="tel"
                    style="background: url(images/shoujihao.png) no-repeat left;background-size: 10% 59%;background-position: 1% 56%;width: 100%;text-indent:24px"
                    lay-verify="required" placeholder="请输入联系方式" autocomplete="off" type="text" class="layui-input">
            </div>
            <hr class="hr15">
            <div style="position: relative;">
                <input name="code" id="code"
                    style="background: url(images/duanxin.png) no-repeat left;background-size: 7% 48%;background-position: 3% 56%;width: 100%;text-indent:24px"
                    lay-verify="required" placeholder="短信验证码" autocomplete="off" type="text" class="layui-input">
                <span class="get_code" onclick="get_code()"
                    style="position: absolute;top: 0;line-height: 50px;right: 20px;color: #3db6fe;cursor: pointer;">发送验证码</span>
            </div>
            <hr class="hr15">
            <div style="position: relative;">
                <i style="position: absolute;left:10px;line-height:50px;font-size:24px;color:#3DB6FE;"
                    class="layui-icon">&#xe673;</i>
                <input name="password" id="pass" style="text-indent:24px" lay-verify="required" placeholder="请输入密码"
                    autocomplete="off" type="password" class="layui-input">
            </div>
            <hr class="hr15">
            <div style="position: relative;">
                <i style="position: absolute;left:10px;line-height:50px;font-size:24px;color:#3DB6FE;"
                    class="layui-icon">&#xe673;</i>
                <input name="confirmPassword" id="pass1" style="text-indent:24px" lay-verify="required"
                    placeholder="请输入确认密码" autocomplete="off" type="password" class="layui-input">
            </div>
            <hr class="hr15">
            <input value="注册" lay-submit lay-filter="login" style="width:100%;background-color: #3DB6FE!important;"
                type="submit">
            <hr class="hr15">
        </form>
    </div>
    <script>
        $(function () {
            // var base64 = new Base64();
            // // 检测是否记住密码
            //
            // if($.cookie("remember")){
            //     $("#remember_user").attr("checked",true)
            //     $("#user_name").val(base64.decode($.cookie("userCount")))
            //     $("#pass").val(base64.decode($.cookie("code")))
            //
            //     // console.log(base64.decode($.cookie("code")))
            //
            // } else {
            //     $("#remember_user").attr("checked", false)
            // }

            layui.use('form', function () {
                var form = layui.form;
                // layer.msg('玩命卖萌中', function(){
                //   //关闭后的操作
                //   });
                //监听提交
                form.on('submit(login)', function (data) {
                    // alert(888)
                    console.log(data.field) //输出提交的信息
                    // 监听登陆按钮，发送请求处理登陆
                    // 选择了记住密码复选框之后的操作
                    if (data.field.remember_user == "on") {
                        // // 存储cookie
                        // $.cookie("remember",true,{
                        //     expires:7
                        // })
                        $.cookie("userCount", base64.encode(data.field.adminName), {
                            expires: 7
                        })
                        $.cookie("code", base64.encode(data.field.password), {
                            expires: 7
                        })
                    }


                    $.ajax({
                        url: register,
                        data: {
                            password: data.field.password,
                            tel: data.field.tel,
                            name: data.field.name,
                            confirmPassword: data.field.confirmPassword,
                            code: data.field.code
                        },
                        dataType: 'json',
                        type: 'get',
                        success: function (res) {
                            //seccess？href跳转：alert(msg)\
                            if (res.msg == "0") {
                                layer.msg("注册成功");
                                setTimeout(function () {
                                    location.href = "login.html";
                                }, 1500)
                            } else {
                                layer.msg(res.msg);
                            }
                        },
                        error: function (error) {
                            console.log(error)
                        }
                    })
                    return false;
                });

                form.verify({
                    // pass:function(){
                    //     var reg = /^[\w]{6,12}$/;
                    //     if (!($('#pass').val().match(reg))) {
                    //         //layer.msg('请输入合法密码');
                    //         layer.msg('请输入合法密码');
                    //     }
                    // }
                })
            });
        })

        //发送短信验证码
        function get_code() {
            console.log($("#tel").val() + "11111111111")
            $.ajax({
                url: sendSms,
                data: {
                    phone: $("#tel").val()
                },
                dataType: 'json',
                type: 'get',
                success: function (res) {
                    //seccess？href跳转：alert(msg)\
                    if (res.msg == "0") {
                        layer.msg("发送成功");
                        countDown();
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        }

        //点击获取验证码 + 短信倒计时
        function countDown() {
            var text = 60;
            $('.get_code').html(text);
            var timer = setInterval(function () {
                if (text == 1) {
                    clearInterval(timer);
                    flag = true;
                    $('.get_code').html('发送验证码');
                } else {
                    text -= 1;
                    flag = false;
                    $('.get_code').html(text);
                }
            }, 1000)
        }
    </script>
</body>

</html>